let url=location.href;
if(url.indexOf('id=')==-1){
    location.href = '../html/huaindex.html';
}
let id = location.search;
let index = id.substr(id.indexOf('=') + 1);
 
localStorage.setItem('url', location.href);

/* !点击logo回到首页 */
let logoimg = document.querySelector('.logoimg');
logoimg.onclick = () => {
  location.href = '../html/huaindex.html';
}

/* !请求详情数据 */
ajax({
    url: '/flo/details.json',
    success: function (res) {
        res = JSON.parse(res);
      let r =  res.data.filter((item) => {
            return index==item.ItemCode
      })
        let select = res.sele;
        topnav(r);
        center(r);
        img(r);
        hao(r);
        sel(select);
        localStorage.setItem('data',JSON.stringify(res.data));
    }
})
 
/* !选择类型 */
function sel(data) {
    let selecttype = document.querySelector('.selecttype');
    selecttype.innerHTML = data.map((item) => {
        return `<a href="http://localhost:3000/html/details.html?id=${item.OptionItemCode}">
                 <img src="${item.OptionImage}" alt="">
                 <p>${item.OptionName}</p>
                </a>`
    }).join('')
}
/* !顶部小导航 */
function topnav(data) {
    let topnav = document.querySelector('.topnav');
    topnav.innerHTML = data.map((item) => {
        return `<a href="">首页</a>&gt;
                <a href="">${item.xianhua}</a>&gt;
                <a href="">${item.Cpmc}</a>
                `
    }).join('');
}

function center(data) {
    let center = document.querySelector('.center');
    center.innerHTML = data.map((item) => {
        return ` <div class="center_img">
                    <p class="bigimg">
                        <img class="big" src="${item.img[0]}" alt="">
                    </p>
                    <div class="smallimg">                    
                             ${
            item.img.map((items) => {
                return `
                 <p><img class="small" src="${items}" alt=""></p>`
            }).join('')
                             }        
                       
                    </div>
                </div>
                <div class="cener_cont">
                    <h2>${item.Cpmc}</h2>
                    <p class="describe">
                        <span class="des">${item.ms}</span>
                        <span>${item.Instro}</span>
                    </p>
                    <div class="sale">
                        <span class="shoujia">售价</span>
                        <div class="saleright">
                            <div class="salesprice">
                                <p class="salep1"><span>￥${item.Price}</span><i>市场价</i><i class="salei">${item.LinePrice}</i></p>
                                <div class="salep2">
                                    <span>手机专享价</span><span>￥${item.phonePrice}</span>
                                    <p><i class="i1"></i>去App购买</p>
                                    <p><i class="i2"></i>去微信购买</p>
                                </div>
                            </div>
                            <div class="allsale">已售<span>${item.Sales}</span>件</div>
                        </div>
                    </div>
                    <div class="huamsg">
                        <div>
                            <i>花语</i>
                            <span>${item.FlowerLanguage}</span>
                        </div>
                        <div>
                            <i>材料</i>
                            <span>${item.Materia}</span>
                        </div>
                        <div>
                            <i>包装</i>
                            <span>${item.packing}</span>
                        </div>
                    </div>
                    <div class="peisong">
                        <i>配送说明</i>
                        <span class="peiso" show="yes">${item.peisong}</span>
                    </div>
                    <div class="peiadd">
                        <i>配送至</i>
                        <div>
                    <div class="sel" data-toggle="distpicker">
                    <select class="selecity" data-province="---- 选择省 ----"></select>
                    <select class="selecity"  data-city="---- 选择市 ----"></select>
                    <select class="selecity"  data-district="---- 选择区 ----"></select>
                    </div>
                     <p class="addp">请选择配送区域</p>
                        </div>
                        
                    </div>
                    <div class="select">
                        <i>选择</i>
                        <div class="selecttype"></div>
                    </div>
                    <div class="shopcart">
                        <button class="cart"><i></i>加入购物车</button>
                        <button class="buynow">立即购买</button>
                        <p><i></i>收藏商品</p>
                    </div>
                    `
    }).join('');
}
function hao(data) {
    let bianhao = document.querySelector('.bianhao');
    bianhao.innerHTML = data.map((item) => {
        return ` <p>
                 <span>编号</span>
                    <i>${item.ItemCode}</i>
                 </p>
                 <p>
                    <span>类别</span>
                     <i>${item.xianhua}</i>
               </p>`
    })
}
/* !图片切换 */
let center1 = document.querySelector('.center');
center1.onmouseover = function (e) {
    e = e || window.event;
    if (e.target.classList.contains('small')) {
        let big = document.querySelector('.big');
        big.src = e.target.src;
    }   
}
let flag = true;
center1.onclick = function (e) {
    e = e || window.event;
    if (e.target.classList.contains('peiso')) {
                if($(e.target).attr("show") == "yes"){
                    $(e.target).attr("show","no").css('-webkit-line-clamp', '999');
                } else{
                    $(e.target).attr("show","yes").css('-webkit-line-clamp', '1');
                }
    }
    /* !地方 */
    if (e.target.Nodename = "SELECT") {
        let flag = false;
        $('.sel select').each((index,item) => {
            if (!item.value) {
                flag = true;
            }
        })
        if (flag == false) {
            $('.addp').html('马上下单，预计明天中午12:00前送到');
            $('.addp').css({
                color: '#71797f',
                width:300+'px'
            });
        }
        
    }
    /* !点击加入购物车 */
    if (e.target.classList.contains('cart')) {
        let login = getCookie('login');
        if (!login) {
            localStorage.setItem('url', location.href);
            location.href = '../html/login.html';
            return;
        }
        let p = pAjax({
            url: '/flo/addCarData.php',
            type: 'post',
            data: {
                phonenum: login,
                goods_id: index,
            },
        });
        p.then(res => {
           res = JSON.parse(res);
            let r = res.code ? confirm('添加成功是否要到购物车查看') : alert('添加失败');
            location.href = r ? '../html/cart.html' : '';
        })
    }
    if (e.target.classList.contains('buynow')) {
        let login = getCookie('login');
        if (!login) {
            localStorage.setItem('url', location.href);
            location.href = '../html/login.html';
            return;
        }
        let p = pAjax({
            url: '/flo/addCarData.php',
            type: 'post',
            data: {
                phonenum: login,
                goods_id: index,
            },
        });
        p.then(res => {
           res = JSON.parse(res);
            location.href = '../html/cart.html';
        })
    }
   
}

/* !图片参数渲染 */
function img(data) {
    let paraimg = document.querySelector('.paraimg');
    paraimg.innerHTML = data.map((item) => {
        return `${item.detailimg.map((items) => {
            return ` <img src="${items}" alt="">`
        }).join('')}`
    }).join('')
}

/* !热门推荐 */
ajax({
    url: "/flo/sellwell.json",
    success: function (res) {
        res = JSON.parse(res);
        sell(res);
    }
})
function sell(data) {
    let sellwells = document.querySelector('.sellwells');
    sellwells.innerHTML = data.map((item) => {
        return `<a href="../html/details.html?id=${item.OptionItemCode}">
                    <img src="${item.OptionImage}" alt="">
                    <p>${item.OptionName}</p>
                    <span>${item.OptionPrice}</span>
               </a>`
    }).join('');
};

/* !点击详情导航 */
let delnav = document.querySelectorAll('.delnav');
let detail = document.querySelector('#detail');
let comment = document.querySelector('#comment');
let question = document. querySelector('#question');
let pro = document.querySelector('#pro');
delnav.forEach((item, idx) => {
    item.onclick = function(e){
        e = e || window;
        e.preventDefault();
        delnav.forEach((items) => {
            items.classList.remove('active');
        })
        this.classList.add('active');
        if (idx == 0) {
            detail.style.display = 'block';
            comment.style.display = 'block';
            question.style.display = 'block';
        }
        if (idx == 1) {
            detail.style.display = 'none';
            comment.style.display = 'block';
            question.style.display = 'block';
        }
        if (idx == 2) {
            detail.style.display = 'none';
            comment.style.display = 'none';
            question.style.display = 'block';
        }
        if (idx == 3) {
            detail.style.display = 'none';
            comment.style.display = 'none';
            question.style.display = 'none';
        }
}
})

/* !图片转换 */
let pronav = document.querySelector('.pronav');
let prop = document.querySelectorAll('.pronav p');
let proimg = document.querySelectorAll('.proimg img');
prop.forEach(function (item, index) {
    item.index = index;
    item.onmouseover = function () {
        proimg.forEach((items) => {
            items.style.display = 'none';
        })
        proimg[item.index].style.display = 'block';
    }
})



/* !点击回顶部 */
let totop = document.querySelector('.totop');
totop.onclick = function (e) {
  scrollTo({
    top: 0,
    behavior:'smooth'
  })
}
/* !导航条固定 */
window.onscroll = function (e) {
   e = e || window.event;
  let y = scrollY;
  let fixnav = document.querySelector('.fixnav');
  if (y >= 250) {
      fixnav.style.position = 'fixed';
  } else {
     fixnav.style.position = 'absolute';
    }
    let paranav = document.querySelector('.paranav');
    if (y >= 1000) {
        paranav.style.position = 'fixed';
        paranav.style.width = 980 + 'px';
        paranav.style.top = '0';
  } else {
     paranav.style.position = 'static';
    }
}
let denglu = document.querySelector('.denglu');
denglu.onclick = (() => {
    /* !判断是否有login */
let login = getCookie('login');
if (login) {
    alert('您已经登录啦');
    return
}
})





